<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>koa2 quick start tpl</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .loading {
            position: absolute;
            left: 50%;
            top: 0;
            width: 400px;
            height: 100%;
            margin-left: -200px;
        }

        #cvs {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body>
<div class="loading">
    <canvas width="500" height="500" id="cvs"></canvas>
</div>
<script>
  let cvs = document.querySelector("#cvs")
  let h = document.querySelector(".loading").clientHeight
  let w = document.querySelector(".loading").clientWidth
  cvs.width = w
  cvs.height = h
  let ctx = cvs.getContext("2d")
  let ds = 0
  let vx = 5
  let color = randColor()
  let arr = []
  function load() {
    ctx.clearRect(0, 0, w, h)
    ds += vx
    ctx.beginPath()
    ctx.fillStyle = color
    ctx.rect(0, h/2-1, ds, 2)
    ctx.fill()
    ctx.closePath()
    if (ds < w) {
      for (let i = 0; i < 2; i++) {
        let item = {
          x: ds,
          y: h/2 -1,
          vx: -1,
          vy: -Math.ceil(Math.random() * 20),
          gy: Math.random()+1,
          color: randColor(),
          t: 0,
          r: 1
        }
        arr.push(item)
      }
    }
    arr.forEach((item, index) => {
      let x = item.x + item.vx
      let vy = item.vy + item.gy
      let t = item.t + 0.02
      let y = item.y + vy * t
      let r = item.r + 0.1
      if (r > 5) r = 5
      arr[index].x = x
      arr[index].y = y
      arr[index].t = t
      arr[index].vy = vy
      arr[index].r = r
      ctx.beginPath()
      ctx.fillStyle = item.color
      ctx.arc(x, y, r, 0, 360)
      ctx.fill()
      ctx.closePath()
      if (y > h) {
        arr.splice(index, 1)
      }
    })
    if (ds > w) {
      color = randColor()
      ds = 0
    }
    requestAnimationFrame(load)
  }

  function randColor() {
    return `rgb(${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)},${Math.ceil(Math.random() * 255)})`
  }

  load()

  let socket = io("ws://0.0.0.0:30002")

  socket.on("msg",data => { })
  setInterval(()=>{
    socket.emit("msg",JSON.stringify({ping: Date.now()}))
  },3000)
  socket.emit("msg",JSON.stringify({ping:Date.now()}))
</script>
</body>
</html>
